<template>
  <div class="homepage">
    <hmttNavBar title="主页"></hmttNavBar>
    <div class="header">
      <div class="tabs">
        <van-tabs v-model="active" @click="getlist">
          <van-tab
            v-for="(item, index) in indexlist"
            :key="index"
            :title="item.name"
            :name="item.id"
          ></van-tab>
        </van-tabs>
      </div>
      <div class="btn" @click="isshow">
        <i class="iconfont">&#xe62b;</i>
      </div>
    </div>
    <homeitem></homeitem>
    <homeitem></homeitem>
    <homeitem></homeitem>
    <homeitem></homeitem>
    <homeitem></homeitem>
    <homeitem></homeitem>
    <homeitem></homeitem>
    <van-popup class="pop" v-model="show" position="bottom">
      <van-cell center>
        <template #title>
          <div class="title">我的频道</div>
        </template>
        <template #default>
          <van-button class="btn" color="#f6666e" size="mini" plain round
            >编 辑</van-button
          >
        </template>
      </van-cell>
      <ul class="my">
        <li class="item" v-for="(item, index) in indexlist" :key="index">
          {{ item.name }}
        </li>
        <li class="noitem"></li>
        <li class="noitem"></li>
        <li class="noitem"></li>
        <li class="noitem"></li>
      </ul>
      <!-- 推荐频道 -->
      <van-cell center>
        <template #title>
          <div class="title">频道推荐</div>
        </template>
      </van-cell>
      <ul class="my">
        <li class="item" v-for="(item, index) in list" :key="index">
          {{ item.name }}
        </li>

        <li class="noitem"></li>
        <li class="noitem"></li>
        <li class="noitem"></li>
        <li class="noitem"></li>
      </ul>
    </van-popup>
  </div>
</template>

<script>
import { appv10channels } from '@/api/homepage'
import { setLocal, getLocal } from '@/utils/local'
export default {
  components: {
    homeitem: () => import('./homeitem')
  },
  data () {
    return {
      show: false,
      list: [],
      indexlist: JSON.parse(getLocal('indexlist')),
      active: 0
    }
  },
  created () {
    const testlist = [
      {
        id: 0,
        name: '推荐'
      }
    ]
    setLocal('indexlist', JSON.stringify(testlist))
  },
  methods: {
    getlist (title, name) {
      window.console.log(title, name)
    },
    async isshow () {
      this.show = true
      const res = await appv10channels()
      window.console.log(res)
      this.list = res.data.data.channels
    }
  }
}
</script>

<style lang="less">
.homepage {
  .header {
    display: flex;
    .tabs {
      flex: 1;
      width: 335px;
    }
    .btn {
      width: 44px;
      text-align: center;
      height: 45px;
      line-height: 45px;
      background-color: #fff;
      .iconfont {
        font-size: 20px;
      }
    }
  }
  .pop {
    height: 80%;
    .btn {
      padding: 0 10px;
    }
    .my {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      .item {
        width: 90px;
        height: 40px;
        line-height: 40px;
        font-size: 10px;
        text-align: center;
        border-right: 1px solid #f7f8f9;
        border-bottom: 1px solid #f7f8f9;
      }
      .noitem {
        width: 90px;
      }
      .item:nth-of-type(4n + 0) {
        border-right: none;
      }
    }
  }
}
</style>
